<template>
		<div class="regist-box">
			<div class="regist-content">
				<div class="regist-form">
					<div class="rf-btn">
						<span id="rf-per" class="rf-per" :class="[state == 'per'? 'cur': '']" @click="registBtn('per')">个人注册</span>
						<span id="rf-com" class="rf-com" :class="[state == 'com'? 'cur': '']" @click="registBtn('com')">公司注册</span>
					</div>
					<!-- 个人注册 -->
					<div class="per-box" v-if="state == 'per'">
						<!-- 第一步 -->
						<div id="per-one" class="per-one" v-if="!hidden">
							<div class="pub-input">
								<span class="pub-input-title">*房屋面积:</span>
								<select class="pub-select" v-model="fixarea">
									<option v-for="(item, index) in fixareaData" :key="index" :value="item.key">{{item.value}}</option>
								</select>
							</div>
							<div class="pub-input">
								<span class="pub-input-title">*装修时间:</span>
								<select class="pub-select" v-model="fixtime">
									<option v-for="(item, index) in fixtimeData" :key="index" :value="item.key">{{item.value}}</option>
								</select>
							</div>
							<div class="pub-input">
								<span class="pub-input-title">*装修预算:</span>
								<select class="pub-select" v-model="fixmoney">
									<option v-for="(item, index) in fixmoneyData" :key="index" :value="item.key">{{item.value}}</option>
								</select>
							</div>
							<div class="pub-input">
								<span class="pub-input-title">*用户姓名:</span>
								<input type="text" class="pub-inputbox" v-model="name" >
							</div>
							<el-cascader
          			size="large"
          			style="width:288px;margin-top:12px;"
          			:options="form.areaData"
          			v-model="form.address"
          			@change="handleChange">
        			</el-cascader>
							<!-- <div class="pub-input">
								<span class="pub-input-title">所属地区:</span>
							</div> -->
							<span class="per-one-btn" @click="personNext">下一步</span>
						</div>
						<div id="per-two" class="per-two" v-if="hidden">
							<div class="pub-input">
								<span class="pub-input-title">*手机号码:</span>
								<input type="text" class="pub-inputbox" style="width:110px;" v-model="form.phone" >
								<!-- <span class="send-code">60s</span> -->
							</div>
<!-- 							<div class="pub-input">
								<span class="pub-input-title">验证码:</span>
								<input type="text" class="pub-inputbox">
							</div> -->
							<div class="pub-input">
								<span class="pub-input-title">*设置密码:</span>
								<input type="password" class="pub-inputbox" v-model="form.password" placeholder="至少包含两种字符组合8位及以上">
							</div>
							<div class="pub-input">
								<span class="pub-input-title">*确认密码:</span>
								<input type="password" class="pub-inputbox" v-model="form.repeatpassword" >
							</div>
							<span class="pre-step" @click="hidden = false">上一步</span>
							<span class="per-one-btn" @click="personSubmit">个人注册</span>
							<div class="rules" @click="dialogVisible = true">
								<span class="cur"></span>
								<span class="open-rules">同意并遵守用户协议和隐私政策</span>
							</div>
						</div>
					</div>
					<!-- 公司注册 -->
					<div class="cop-box" v-if="state == 'com'">
						<div class="per-two">
							<div class="pub-input">
								<span class="pub-input-title" placeholder="请输入11位手机号码">手机号码:</span>
								<input type="text" class="pub-inputbox" style="width:110px;" v-model="company.phone">
								<!-- <span class="send-code">60s</span> -->
							</div>
<!-- 							<div class="pub-input">
								<span class="pub-input-title">验证码:</span>
								<input type="text" class="pub-inputbox" v-model="company.code">
							</div> -->
							<div class="pub-input">
								<span class="pub-input-title">设置密码:</span>
								<input type="password" class="pub-inputbox" v-model="company.password" placeholder="至少包含两种字符组合8位及以上">
							</div>
							<div class="pub-input">
								<span class="pub-input-title">确认密码:</span>
								<input type="password" class="pub-inputbox" v-model="company.repeatPassword" placeholder="请确认密码">
							</div>
              <span class="per-one-btn" @click="companySubmit">企业注册</span>
							<div class="rules" @click="dialogVisible = true">
								<span class="cur"></span>
								<span class="open-rules">同意并遵守用户协议和隐私政策</span>
							</div>
						</div>
					</div>
					<!-- 注册成功 -->
					<div class="regist-success hidden">
						<p class="success-ico">恭喜您注册成功!</p>
						<p class="your-account">您的登录账号:14725836925</p>
						<span class="per-one-btn">企业注册</span>
					</div>
				</div>
			</div>
      <el-dialog
        title="看装修网 用户注册协议"
        :visible.sync="dialogVisible"
        width="70%"
        height="500px"
        style="overflow-y:auto;"
        center>
        <span style="line-height:28px;height:500px;overflow-y:auto;display:block">
          <rules></rules>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
		</div>
</template>

<script>
import cityData from '../assets/script/data.json'
import { provinceAndCityData, regionData, CodeToText, regionDataPlus, TextToCode } from 'element-china-area-data'
import $ from 'jquery'
import rules from './rules'
export default {
  data () {
    return {
      dialogVisible: false,
      state: 'per',
    	hidden: false,
    	fixarea: '',
    	fixareaData: [],
    	fixmoney: '',
    	fixmoneyData: [],
    	fixtime: '',
    	fixtimeData: [],
    	name: '',
    	form: {
        address: [],
    		areaData: regionData,
    		Province: '',
    		City: '',
    		Area: '',
    		phone: '',
    		password: '',
    		repeatpassword: ''
    	},
      company: {
        phone: '',
        code: '',
        password: '',
        repeatPassword: ''
      }
    }
  },
  components: {
    rules
  },
  methods: {
    registBtn: function (key) {
      this.state = key
    },
  	getType () {
  		var that = this
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 4
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.fixareaData = res.data.items
  					that.fixarea = that.fixareaData[0].key
  				}
  			})
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 5
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.fixtimeData = res.data.items
  					that.fixtime = that.fixtimeData[0].key
  				}
  			})
  		that.$axios.request('/Config/Get', {
  			ParamIndex: 6
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.fixmoneyData = res.data.items
  					that.fixmoney = that.fixmoneyData[0].key
  				}
  			})
  	},
  	personNext () {
  		if (this.name === '') {
  			this.$message.error('姓名不能为空')
  			return false
  		}
  		if (this.form.address === '') {
  			this.$message.error('请选择地址')
  			return false
  		}
  		this.hidden = true
  	},
  	personSubmit () {
  		var that = this
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/
      var password=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.#%'\+\*\-:;^_`]+$)[,\.#%'\+\*\-:;^_`0-9A-Za-z]{8,}$/
  		if (that.form.phone === '') {
  			that.$message.error('请输入手机号码')
  			return false
  		} else if (!myreg.test(that.form.phone)) {
        that.$message.error('请输入正确的手机号码')
        return false
      }
      if (that.form.password === '') {
  			that.$message.error('请设置密码')
        return false
      } else if (!password.test(that.form.password)) {
      	that.$message.error('请设置至少包含两种字符的8位以上密码')
        return false
      }
      if (that.form.repeatpassword === '') {
  			that.$message.error('请再次输入密码')
        return false
      } else if (that.form.password !== that.form.repeatpassword) {
  			that.$message.error('两次密码不一致')
        return false
      }
  		that.$axios.request('/Account/Registered', {
  			FixArea: that.fixarea,
  			FixTime: that.fixtime,
  			FixMoney: that.fixmoney,
  			Name: that.name,
  			Province: CodeToText[that.form.address[0]],
  			City: CodeToText[that.form.address[1]],
  			Area: CodeToText[that.form.address[2]],
  			Phone: that.form.phone,
  			Password: that.form.password,
  			RepeatPassword: that.form.repeatpassword
  		})
  			.then((res) => {
  				if (res.code === 0) {
  					that.$axios.alert('注册成功,立即登录', '提示', function () {
  						that.$router.push({
  							name: 'login'
  						})
  					})
  				}
  			})
  	},
    companySubmit () {
      var that = this
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/
      var password=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![,\.#%'\+\*\-:;^_`]+$)[,\.#%'\+\*\-:;^_`0-9A-Za-z]{8,}$/
      if (that.company.phone === '') {
        that.$message.error('请输入手机号码')
        return false
      } else if (!myreg.test(that.company.phone)) {
        that.$message.error('请输入正确的手机号码')
        return false
      }
      if (that.company.password === '') {
        that.$message.error('请设置密码')
        return false
      } else if (!password.test(that.company.password)) {
        that.$message.error('请设置至少包含两种字符的8位以上密码')
        return false
      }
      if (that.company.repeatpassword === '') {
        that.$message.error('请再次输入密码')
        return false
      } else if (that.company.password !== that.company.repeatPassword) {
        that.$message.error('两次密码不一致')
        return false
      }
      $.ajax({
        url: that.$axios.link + '/Account/Registered',
        type: 'get',
        dataType: 'jsonp',
        data: {
          Phone: that.company.phone,
          Password: that.company.password,
          RepeatPassword: that.company.repeatPassword
        },
        success: function (data) {
          if (data.code === 0) {
            that.$axios.alert('注册成功,立即登录', '提示', function() {
              that.$router.push({name: 'login'})
            })
          }
          if (data.code === -1) {
            that.$axios.messageTwo(data.data, '提示')
          }
        }
      })
    },
    handleChange (value) {
      this.form.Province = CodeToText[value[0]]
      this.form.City = CodeToText[value[1]]
      this.form.Area = CodeToText[value[2]]
    }
  },
  mounted () {
    var that = this
    that.$axios.getCity(function(){
      var area = []
      var province = that.$store.state.province
      var city = that.$store.state.city
      for (var i in cityData['86']) {
        if (cityData['86'][i] === province) {
          for (var j in cityData[i]) {
            if (cityData[i][j] === city) {
              for (var k in cityData[j]) {
                area.push(cityData[j][k])
              }
            }
          }
        }
      }
      var one = TextToCode[that.$store.state.province].code
      var two = TextToCode[that.$store.state.province][that.$store.state.city].code
      var three = TextToCode[that.$store.state.province][that.$store.state.city][area[0]].code
      that.form.address = [one,two,three]
    })
    that.getType()
  }
}
</script>
